<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Regular.js • Getting-Start</title>
  <!-- include regular.js -->
  <script src="../dist/regular.js"></script>
</head>
<body>
  <!-- the container -->
  <div id="app"></div>

  <!-- Regular template container(optional) -->
  <!-- if you need this component used in other component, you can specify name in the tag-->
  <script id="helloword" type="text/regular" name="helloword">
    Hello 
    {#if user}
      <strong> &cent; {user}</strong>, <a href='#' on-click={user = null}>logout</a>
    {#else}
      Friend, please <a href='#' on-click={this.login()}>login</a>
    {/if}
  </script>

  <!-- Define your Own Component -->
  <script>
    var LoginApp = Regular.extend({
      // name: 'helloword',  if this component need used in other component , you need specify name
      // you can pass [String| preparsed AST | node selector]
      template: '#helloword', //if es6 released,  multi-line string is 
      login: function(){
        // all data is store in the plain object `this.data`;
        var data = this.data;
        // just like angular, if trigger by the ui , the $digest phase will automate triggerd;
        data.user = prompt("Please Enter you name", "");
      }
    });

    var application = new LoginApp().$inject('#app');
    // you can also inject the component at other position, for example `inject('#app', 'bottom' | 'top' | 'after' | 'before')`, the default is 'bottom'
  </script>


</body>
</html>